﻿@model FujiyBlog.Web.Areas.Admin.ViewModels.AdminCategoriesList
@{
    ViewBag.Title = "Categories";
    Layout = MVC.Admin.Post.Views._Layout;
}
<h2>
    Categories</h2>
<p>
    <a href="javascript:void(0);" id="open-new-item-dialog">Add new category</a>
</p>
<table>
    <tr>
        <th>
        </th>
        <th>
            @Html.LabelFor(model => model.NewCategory.Name)
        </th>
        <th>
            Posts
        </th>
    </tr>
    @foreach (var item in Model.CategoriesPostCount)
    {
        <tr data-item-id="@item.Key.Id" id="item-row-@item.Key.Id">
            <td>
                <a href="javascript:void(0);" class="btn-edit-item">Edit</a>
                @Ajax.ActionLink("Delete", MVC.Admin.Post.DeleteCategory(item.Key.Id), new AjaxOptions() { HttpMethod = "POST", Confirm = "Sure?", OnSuccess = "RemoveItemRow(" + item.Key.Id + ");" }, new { @class = "btn-delete-item" })

                <a href="javascript:void(0);" class="btn-update-item" style="display:none">Update</a>
                <a href="javascript:void(0);" class="btn-cancel-item" style="display:none">Cancel</a>
                
            </td>
            <td>
                @Html.TextBoxFor(modelItem => item.Key.Name, new { id = "txt-item-name" + item.Key.Id, style = "display:none", @class = "txt-item-name" })
                <span class="lbl-item-name">@Html.DisplayFor(modelItem => item.Key.Name)</span>
            </td>
            <td>
                @item.Value
            </td>
        </tr>
    }
</table>

<div id="add-new-item">
    @using (Ajax.BeginForm(MVC.Admin.Post.AddCategory(), new AjaxOptions { HttpMethod = "POST", OnSuccess = "location.href=location.href;" }, new { id = "form-new-item" }))
    {
        <fieldset>
            <legend>Add New Category</legend>

            <div class="editor-label">
                @Html.LabelFor(model => model.NewCategory.Name)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.NewCategory.Name)
                @Html.ValidationMessageFor(model => model.NewCategory.Name)
            </div>
        </fieldset>
    }
</div>

<script type="text/javascript">
    $('.btn-edit-item').click(function () {
        var $this = $(this);
        var itemRow = $this.parents('tr');

        $this.hide();
        $this.siblings('.btn-delete-item').hide();
        $this.siblings('.btn-update-item,.btn-cancel-item').show();

        itemRow.find('.txt-item-name').show();
        itemRow.find('.lbl-item-name').hide();
    });

    $('.btn-cancel-item').click(function () {
        var $this = $(this);
        var itemRow = $this.parents('tr');

        $this.hide();
        $this.siblings('.btn-edit-item,.btn-delete-item').show();
        $this.siblings('.btn-update-item').hide();

        itemRow.find('.txt-item-name').hide();
        itemRow.find('.lbl-item-name').show();
    });

    function RemoveItemRow(itemId) {
        $('#item-row-' + itemId).hide();
    }

    $('.btn-update-item').click(function () {
        var itemRow = $(this).parents('tr');
        var itemId = itemRow.data('item-id')
        var txtItemName = itemRow.find('#txt-item-name' + itemId);
        var itemName = txtItemName.val()

        if (itemName === '') {
            return;
        }

        var callUrl = '@Url.Action(MVC.Admin.Post.UpdateCategory())';
        var callData = { id: itemId, name: itemName };
        $.ajax({
            type: "POST",
            url: callUrl,
            data: callData,
            success: function (response) {
                if (!response.errorMessage) {
                    txtItemName.val(itemName);
                    itemRow.find('.lbl-item-name').text(itemName);
                    itemRow.find('.btn-cancel-item').click();
                }
                else {
                    alert(response.errorMessage);
                }
            },
            error: function () {
                alert('Error');
            }
        });
    });

    var dialogAddNewItem = $('#add-new-item').dialog({
        autoOpen: false, draggable: false, modal: true, resizable: false, title: 'Add New Category',
        buttons: {
            "Create": function () { $('#form-new-item').submit(); },
            "Cancel": function () { $(this).dialog("close"); }
        }
    });

    $('#open-new-item-dialog').click(function () {
        dialogAddNewItem.dialog('open');
    });
</script>